<template>
	<view>
		<view class="uni-list">
			<block v-for="(value, index) in listData" :key="index">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="value.course.thumb"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{ value.course.title }}</view>
							<view class="uni-media-list-text-bottom">
								<text>新报名</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current_page: 1,
				last_page: '',
				listData: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.getList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.current_page++
			if (this.current_page <= this.last_page) {
				this.getList();
			} else {
				this.status = 'nomore';
				uni.showToast({
					title: '已加载全部',
					duration: 500
				})
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './calendar'
			});
		},
		methods: {
			getList() {
				this.status = 'loading';
				var data = {
					//column: 'id,category_id,title,author_name,thumb,create_time', //需要的字段名
					page: this.current_page,
					limit: 10
				};
				this.$store.dispatch('request', {
					url: "course_orders", 
					data: data,
				}).then((res) => {
					this.current_page = res.data.current_page;
					this.last_page = res.data.last_page;
					this.listData = this.listData.concat(res.data.data);
					
					if (this.last_page == 1) {
						this.status = 'nomore';
					}
					
				}).catch((error) => {
				 	console.log(error)
				})
			},
			goDetail: function(e) {
				let detail = {
					id: e.course_id,
					title: e.course.title,
					thumb: e.course.thumb,
				};
				uni.navigateTo({
					url: 'detail?payload=' + encodeURIComponent(JSON.stringify(detail))
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-media-list-logo {
		width: 240rpx;
		height: 140rpx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 74rpx;
		font-size: 28rpx;
		overflow: hidden;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
